<script setup>
import {ref,onMounted,defineProps,defineEmits} from "vue"

const props = defineProps({
    music_image:{type:String},
    num1:{type:Number},
    name:{type:String},
})
const emit = defineEmits(['reuturnBtn'])

const returnEmit = (num) => {
    emit('reuturnBtn',num)
}
</script>

<template>
    <div class="detail_box" @click="returnEmit(props.num1)">
        <div class="imageBox">
            <img :src="props.music_image" alt="">
        </div>
        <div class="nameBox">
            <span>{{ props.name }}</span>
        </div>
    </div>
</template>

<style scoped>
.detail_box{
    margin-left: 30px;
    width: 350px;
    height: 250px;
    box-shadow: 1px 1px 2px 2px #000;
    border-radius: 10px;
}
.imageBox{
    width: 100%;
    height: 80%;
}
.imageBox img{
    width: 100%;
    height: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.nameBox{
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
</style>